<template>
  <el-tree
  ref="tree"
  :data="treeDatas"
  :node-key="treeNodeKey"
  show-checkbox
  :style-="customStyle"
  :default-checked-keys="selectTreeKeys"
  :default-expand-all="expandAll"
  :check-strictly="true"
  :render-after-expand="false"
  :props="{ label: treeLabel, children: 'children' }"
  @check-change="checkedChange">

  </el-tree>
</template>

<script>
export default {
  name: 'DataTree',
  props: {
    treeNodeKey:{
      type: String,
      default: ()=> 'id'
    },
    treeLabel: {
      type: String,
      default: ()=> 'name'
    },
    treeDatas: {
      type: Array,
      default: ()=> []
    },
    treeValue: {
      type: Array,
      default: ()=> []
    },
    defaultCheckedKeys: {
      type: Array,
      default: ()=> null
    },
    expandAll: {
      type: Boolean,
      default: ()=> true
    },
    customStyle: {
      type: String,
      default: () => ''
    }
  },
  created() {
    this.$nextTick(()=> {
      if(this.treeDatas && this.treeDatas.length > 0) {
          this.treeDataList =  this.getTreeDataList(this.treeDatas)
      }
      if(this.treeValue && this.treeValue.length > 0) {
        this.selectTreeKeys = this.treeValue
      }
    })
  },
  computed: {
    selectTreeKeys: {
      get(){
        return this.defaultCheckedKeys
      },
      set(val){
        this.$emit('update:defaultCheckedKeys', val)
      }
    },

  },
  data() {
    return {
      treeDataList: [],
      cancelCheckedNodes: []
    }
  },
  methods: {
    // 节点复选框取消勾选处理
    async checkedChange(val, status) {
      const nodeKey = val.id
      if (!status) {
        this.cancelCheckedNodes.push(nodeKey)
      } else {
        this.cancelCheckedNodes = this.cancelCheckedNodes.filter(item=> nodeKey !== item)
        await this.treeCheck(nodeKey)
      }
      const selectTreeNodeValue = this.selectTreeKeys.filter(item=> !this.cancelCheckedNodes.includes(item))
      this.$emit('update:treeValue', selectTreeNodeValue)
    },

    // 节点复选框点击事件
    treeCheck(nodeId) {
      let selectTreeNodes = this.getParentNode(nodeId)
      if (!this.selectTreeKeys || this.selectTreeKeys.length <= 0) {
        this.selectTreeKeys = selectTreeNodes
      } else {
        for (let nodeIndex in selectTreeNodes) {
          const nodeKey = selectTreeNodes[nodeIndex]
          if (this.selectTreeKeys.join(',').indexOf(String(nodeKey)) < 0) {
            this.selectTreeKeys[this.selectTreeKeys.length] = nodeKey
          }
        }
      }
    },

    // 获取所点击节点父节点信息
    getParentNode(nodeId, nodes, treeDatas) {
      if (!nodes) nodes = []
      if (!treeDatas || treeDatas.length <= 0) treeDatas = this.treeDataList
      for (let dataIndex in treeDatas) {
        const treeData = treeDatas[dataIndex]
        if (treeData.id === nodeId) {
          nodes[nodes.length] = treeData.id
          this.getParentNode(treeData.parentId, nodes)
        }
      }
      return nodes
    },

    // 树形结构转换为列表结构
    getTreeDataList(treeDatas, treeDataList) {
      if(!treeDataList) treeDataList = []
      let childrenDatas = []
      for (let dataIndex in treeDatas) {
        const treeData = treeDatas[dataIndex]
        treeDataList[treeDataList.length] = treeData
        if (treeData.children && treeData.children.length > 0) {
          for (let childrenIndex in treeData.children){
            childrenDatas[childrenDatas.length] = treeData.children[childrenIndex]
          }
        }
      }
      if (childrenDatas.length > 0) {
        this.getTreeDataList(childrenDatas, treeDataList)
      }
      return treeDataList;
    }
  }
}
</script>

<style lang="scss" scoped>
</style>